<<template>
  <div class="pic_content" v-loading="loading">
    <div class="pic_info_box">
      <el-row class="info_item">
        <span class="key">
          <span>车</span>
          <span>牌</span>
          <span>号</span>
        </span>
        <span class="value">{{ formData.vehicle_num }}</span>
      </el-row>
      <el-row class="info_item">
        <span class="key">
          <span>称</span>
          <span>重</span>
          <span>时</span>
          <span>间</span>
        </span>
        <span class="value">{{ formData.time }}</span>
      </el-row>
      <el-row class="info_item">
        <span class="key">
          <span>重</span>
          <span>量</span>
        </span>
        <span class="value">{{ formData.weight }} 吨</span>
      </el-row>
      <el-row class="info_item" v-show="false">
        <span class="key">
          device_code:
        </span>
        <span class="value">{{ formData.device_code }}</span>
      </el-row>
      <el-row class="info_item" v-show="false">
        <span class="key">
          device_num:
        </span>
        <span class="value">{{ formData.device_num }}</span>
      </el-row>
    </div>
    <el-row class="pic_text" v-if="weightType == 'error'">
      <i class="el-icon-warning-outline"></i>
      车辆{{
        formData.origin == "emptyLocation" ? "入场" : "出场"
      }}，请检查货物情况！
    </el-row>
    <div
      class="pic_viewer_box"
      :style="weightType == 'error' ? '' : 'margin-top: 30px'"
    >
      <el-button
        size="small"
        type="primary"
        icon="el-icon-refresh"
        class="refresh_btn"
        @click="refresh"
        >更新照片
      </el-button>
      <div class="pic_viewer">
        <el-image
          v-for="(item, index) in formData.weightPicMin"
          :key="index"
          class="img"
          fit="cover"
          :src="item"
          :preview-src-list="privewImages(formData.weightPic, index)"
        >
        </el-image>
      </div>
    </div>
  </div>

  <!-- <div class="pic_toolbar">
          <span class="info_text">
            <i class="el-icon-warning-outline"></i>
            请选择正确的车辆类型
          </span>
          <el-button type="info" class="">空车</el-button>
          <el-button type="info" class="">重车</el-button>
        </div> -->
</template>

<script>
export default {
  name: "pic_viewer",
  props: {
    formData: {
      default: () => {
        return {
          vehicle_num: 0,
          time: 0,
          weight: 0,
          origin: "",
          device_code: "",
          device_num: "",
          weightPicMin: [],
          weightPic: []
        };
      }
    },
    loading: {
      default: false
    },
    weightType: {
      default: ""
    }
  },
  data() {
    return {};
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
    refresh() {
      this.$emit(
        "refresh",
        this.weightType,
        this.formData.device_code,
        this.formData.device_num
      );
    },

    // 调整图片顺序，把当前图片放在第一位
    privewImages(l, index) {
      let list = [...l];
      if (index == 0) return list;
      let start = list.splice(index);
      let remain = list.splice(0, index);
      return start.concat(remain);
    },
    settle() {},
    notSettle() {}
  }
};
</script>

<style lang="scss" scoped>
.pic_content {
  border-top: 1px solid #eee;
  padding: 20px;
  .pic_info_box {
    margin-bottom: 20px;
    .info_item {
      line-height: 35px;
      color: #333;
      font-size: 24px;
      margin-bottom: 10px;
      .key {
        display: inline-flex;
        justify-content: space-between;
        width: 100px;
        color: #999999;
        margin-right: 20px;
        text-align: center;
      }
    }
  }
  .pic_text {
    color: #fa5858;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 5px;
  }
  .pic_viewer_box {
    position: relative;
    .refresh_btn {
      position: absolute;
      right: 0px;
      top: -40px;
      border-color: #979797;
      background: #fff;
      color: #666;
      &:hover {
        background: #f7f7f7;
      }
    }
    .pic_viewer {
      max-height: 400px;
      overflow: auto;
      margin: 0 -5px;
      position: relative;
      .refresh_btn {
        position: absolute;
        right: 0px;
        top: 0px;
        border-color: #fff;
        background: #fff;
        color: #666;
      }
      .title {
        color: #3344dd;
        font-size: 24px;
        line-height: 30px;
        margin-left: 30px;
        font-weight: bold;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: -20px;
          top: 10px;
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #3344dd;
        }
      }
      .img {
        width: calc(33.3% - 10px);
        height: 170px;
        margin: 5px;
        cursor: pointer;
      }
    }
  }
}
.pic_toolbar {
  border-top: 1px solid #eee;
  padding: 20px;
  display: inline-flex;
  justify-content: end;
  width: 100%;
  .info_text {
    color: #999;
    font-size: 20px;
    line-height: 48px;
    margin-right: 10px;
  }
  button {
    border: 1px solid #d9d9d9;
    background: #eee;
    color: #3344dd;
    font-size: 24px;
    text-indent: 1em;
    letter-spacing: 1em;
    text-align: center;
  }
}
</style>
